<template>
  <el-popover class="module-moleAnchorPoint" placement="right" width="500" trigger="click">
    <div class="setting-container-anchor-point">
      <header>
        <div class="sub-item">锚点导航</div>
      </header>
      <section>
        <div v-for="(item, i) in data.content_list" :key="i" class="item-container">
          <div style="text-align: center; margin-right: 12px">
            <el-upload
              class="avatar-uploader"
              accept="image/*"
              :action="upladUrl"
              name="file"
              :show-file-list="false"
              :before-upload="beforeUpload"
              :on-success="(res)=>{ item.pic_normal = replaceImgUrl(res.filePath); }"
            >
              <img v-if="item.pic_normal" :src="item.pic_normal" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div>未选中效果</div>
          </div>
          <div style="text-align: center; margin-right: 12px">
            <el-upload
              class="avatar-uploader"
              accept="image/*"
              :action="upladUrl"
              name="file"
              :show-file-list="false"
              :before-upload="beforeUpload"
              :on-success="(res)=>{ item.pic_checked = replaceImgUrl(res.filePath); }"
            >
              <img v-if="item.pic_checked" :src="item.pic_checked" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div>选中效果</div>
          </div>
          <div class="sub-item">跳转锚点：{{item.connect_name}}</div>
        </div>
      </section>
    </div>
    <div slot="reference" :class="{'anchor-container': data.content_list.length < 5, 'anchor-scroll-container': data.content_list.length >= 5}" :id="`moduleForm${moduleIndex}`">
      <template v-if="data.content_list.length">
        <template v-if="data.content_list.length < 5">
          <div class="pic-item" v-for="(item, i) in data.content_list" :key="i">
            <img v-if="item.pic_normal" :src="item.pic_normal" />
            <img v-else src="../../../../assets/common/default_goods_pic.png" />
          </div>
        </template>
        <div v-else :style="`width: ${data.content_list.length*318/(5-0.5)}px; min-width: 100%`">
          <div class="pic-item" v-for="(item, i) in data.content_list" :key="i" :style="`width: ${318/(5-0.5)}px`">
              <img v-if="item.pic_normal" :src="item.pic_normal">
              <img v-else src="../../../../assets/common/default_goods_pic.png">
          </div>
        </div>
      </template>
      <div v-else style="padding: 12px">
        请先设置锚点
      </div>
    </div>
  </el-popover>
</template>
<script>
export default {
  name: "H5AnchorPoint",
  props: {
    moduleIndex: {
      type: Number,
      default: 0
    },
    data: {
      type: Object,
      default: {}
    },
    remove: {
      type: Function
    }
  },
  data() {
    return {
      visible: false
    };
  },
  methods: {
  }
};
</script>
<style lang="scss">
@import "../../../../styles/mixin";
/*.avatar-uploader .el-upload,
    .upload-img-list li,
    .upload-img-list .upload-btn{
        width: 80px;
        height: 80px;
        line-height: 78px;
    }*/
.flex-container {
  @include flex;

  .item-type {
    width: 112px !important;
  }
  .sub-item {
    @include sub-item;
  }
}
.setting-container-anchor-point {
  header {
    @include flex;
    @include a-center;
    border-bottom: 1px solid #efefef;
    padding-bottom: 6px;

    .sub-item {
      @include sub-item;
      span {
        color: #999;
        font-size: 12px;
      }
    }
    .remove-btn {
      color: red;
    }
  }
  .anchor-point-container {
    @include a-center;
    padding-top: 10px;

    .label {
      padding-right: 10px;
    }

    .el-input {
      margin-left: 10px;
    }
  }
  .item-container {
    @include flex;
    @include a-center;
    padding: 18px 6px 6px 6px;
    border: 1px solid #efefef;
    margin-top: 6px;

    .sub-item {
      @include sub-item;
    }
    .tool-item {
      color: red;
      padding: 6px;
      cursor: pointer;
    }
  }
  .add-container {
    text-align: center;
    padding-top: 12px;
  }
}
.anchor-container {
  @include flex;
  position: sticky;
  top: 0;
  .pic-item {
    @include sub-item;

    img {
      width: 100%;
      display: block;
    }
  }
}
.anchor-scroll-container {
  @include scrollbar(3);
  width: 100%;
  position: sticky;
  top: 195px;

  .pic-item{
    display: inline-block;
    img{
      width: 100%;
      display: block;
    }
  }
}
</style>
